import React, { useState, useEffect, useCallback } from 'react';
import './ImageList.css';
import { getTemAll } from '../../../request';
import Masonry from 'react-masonry-css'

const ImageList: React.FC = () => {

 const [imageData,setImageData]=useState<Array<{id:string;image:string}>>([]);
    useEffect(()=>{
       getTemAll().then(res=>{
                setImageData(res.data.list)
            })
    },[])

    const uniqueKeys=new Set();

    function
     generateUniqueKey(id) {
        let key = id;
        let count = 1;
        
        while (uniqueKeys.has(key)) {
            key = `${id}_${count}`;
            count+1;
        }
        uniqueKeys.add(key);
        return key;
     }  


  return (

    <div>
      <Masonry 
        breakpointCols={{default: 5, 1100: 3, 700: 2, 500: 1}}
        className='my-masonry-grid'
        columnClassName='my-masonry-grid_column'
        >
         {imageData.map(item => (
          <div key={generateUniqueKey(item.id)} style={{ marginBottom: '10px' }}>
            <img
              src={item.image}
              alt="Image"
              style={{ width: '100%', borderRadius: '10px', display: 'block' }}
            />
          </div>
        ))}

        </Masonry>


        <div>
        
        </div>
        
    </div>
  );
};

export default ImageList;
